<template>
  <div class="homepage">
    <!-- banner部分 -->
    <div class="aiseo-home-banner">
      <div class="img-box unselectable">
        <img
          class="img-normal"
          @click="handleClickTo"
          src="@/assets/image/pageHome/roundBTN-blur.png"
          alt=""
        />
        <img
          class="img-hover"
          @click="handleClickTo"
          src="@/assets/image/pageHome/roundBTN-hover.png"
          alt=""
        />
        <!-- <span class="image-text" @click="handleClickTo">>立即定制&lt;</span> -->
      </div>
      <el-icon style="cursor: pointer"><ArrowDown /></el-icon>
      <ul class="banner-list">
        <li>助力网站成长</li>
        <li>文章撰写降本增效</li>
        <li>网站整体运营</li>
      </ul>
      <div @click="handleOpenChat" class="button-outer mt-48">
        <el-button class="learn-more">了解更多</el-button>
      </div>
    </div>
    <!-- 服务列表 -->
    <div
      class="aiseo-home-server scrollbar-class"
    >
      <ul class="server-content">
        <li
          @click="handleClickTo2(item)"
          class="content-item"
          v-for="(item, index) in serveList"
          :key="index"
          :class="`content-item${index}`"
        >
          <div class="item-title">
            {{ item.title }}<el-icon class="ml-8"><ArrowRightBold /></el-icon>
          </div>
          <ul class="item-description mt-8">
            <li v-for="ii in item.desc">{{ ii }}</li>
          </ul>
          <img :src="item.number1" alt="" class="item-number item-number1" />
          <img :src="item.number11" alt="" class="item-number item-number11" />
        </li>
      </ul>
    </div>
    <!-- 数据部分 -->
    <div class="aiseo-home-dataArr">
      <ul class="dataArr-content">
        <li v-for="(item, index) in dataArr" :key="index">
          <div class="item-number">{{ item.count }}</div>
          <div class="item-data-info">
            <img class="data-icon" :src="item.icon" alt="" />
            <span class="data-info-title">{{ item.title }}</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 定制服务 -->
    <div
      id="aiseo-home-customizedServices"
      class="aiseo-home-customizedServices"
      ref="customerRef"
    >
      <div style="flex: 1; background: #333333; height: 100%">
        <div class="aiseo-home-right">
          <img
            class="img-customizedServices"
            src="@/assets/image/pageHome/img／homepage／title／customServices@2x.png"
            alt=""
          />
          <p class="title-disc mt-28">留下您的联系方式&需求,</p>
          <p class="title-disc">专属客服将为您量身定制网推方案.</p>
          <div class="form-item phone-item">
            <div class="form-item-content">
              <div class="form-item-title">手机号码</div>
              <div
                class="form-item-phonebox"
                :class="{
                  'form-item-phonebox-erro': errorText,
                  'foucus-input': isFocus,
                }"
                style=""
              >
                <el-input
                  class="phineInput"
                  maxlength="11"
                  v-model="serveForm.phoneNumber"
                  placeholder="请输入您的手机号码"
                  type="number"
                  @focus="isFocus = true"
                  @blur="
                    () => {
                      isFocus = false;
                      validatePhone();
                    }
                  "
                />
                <span class="error-tips">{{ errorText }}</span>
              </div>
            </div>
          </div>
          <div class="form-item mt-32">
            <div class="form-item-content">
              <div class="form-item-title">需求描述</div>
              <el-input
                class="mt-12 form-item-textarea"
                maxlength="500"
                v-model="serveForm.describe"
                placeholder="请将内容控制在500字符以内"
                type="textarea"
                resize="none"
              />
            </div>
          </div>
          <div
            @click="handleSubmit"
            class="flex"
            style="align-items: unsafe; margin-top: 32px"
          >
            <img
              v-show="serveForm.phoneNumber.length !== 11"
              style="width: 160px"
              src="@/assets/image/pageHome/button-diyNow-disabled.png"
              alt=""
            />
            <div
              class="lottie-box"
              v-show="serveForm.phoneNumber.length === 11"
            >
              <img
                style="width: 160px"
                ref="image"
                class="lottie-box-item"
                src="@/assets/image/pageHome/button-diyNow_normal.png"
                alt=""
              />
              <!-- <div class="lottie-box-item" ref="lottieContainer"></div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 流程 -->
    <div
      class="aiseo-home-advantage scrollbar-class"
    >
      <img src="@/assets/image/mobile/process1.png" alt="" class="bosdwer" />
      <img
        src="@/assets/image/pageHome/footer9.png"
        alt=""
        class="bosdwerJian"
      />
      <img src="@/assets/image/mobile/process2.png" alt="" class="bosdwer" />
      <img
        src="@/assets/image/pageHome/footer9.png"
        alt=""
        class="bosdwerJian"
      />
      <img src="@/assets/image/mobile/process3.png" alt="" class="bosdwer" />
      <img
        src="@/assets/image/pageHome/footer9.png"
        alt=""
        class="bosdwerJian"
      />
      <img src="@/assets/image/mobile/process4.png" alt="" class="bosdwer" />
      <img
        src="@/assets/image/pageHome/footer9.png"
        alt=""
        class="bosdwerJian"
      />
      <img src="@/assets/image/mobile/process5.png" alt="" class="bosdwer" />
    </div>
    <!-- 平台优势 -->
    <div class="homefoot mt-40" v-if="currentpage > pageShowNode.advantage">
      <div class="title">
        <img
          src="@/assets/image/SEOcustomer/img／common／title／advantages@2x.png"
          alt=""
          style="width: 108px"
        />
      </div>
      <div class="bodyRinges">
        <div class="advantage-item">
          <img
            class="img-advantage"
            src="@/assets/image/pageHome/img-homepage-pictureRes-advantage01.webp"
            alt=""
          />
          <div
            class="flex flex-direction justify-content"
            style="height: 100%; flex: 1"
          >
            <div class="desc-item">
              <div class="desc-item-title">
                <img
                  class="img-number"
                  src="@/assets/image/mobile/01@2x.png"
                  alt=""
                />
                <p>&nbsp;·&nbsp;保证原创</p>
              </div>
              <div class="Horizontal"></div>
              <div class="textTittle">
                作为一家专业的推广平台，我们以“保证原创”为核心特色，致力于为用户提供独特、高质量的内容创作服务。内容团队人均4年以上营销推广经验，同时与各行业KOL达成战略合作协议，确保为您的企业和产品量身定制推广文稿，每一篇文稿都源于写手们独特的思考、深入的研究和精心的打磨。
              </div>
            </div>
          </div>
        </div>
        <div class="advantage-item">
          <img
            class="img-advantage"
            src="@/assets/image/mobile/advantage.png"
            alt=""
          />
          <div
            class="flex flex-direction justify-content"
            style="height: 100%; flex: 1"
          >
            <div class="desc-item">
              <div class="desc-item-title">
                <img
                  class="img-number"
                  src="@/assets/image/mobile/02@2x.png"
                  alt=""
                />
                <p>&nbsp;·&nbsp;AI辅助</p>
              </div>
              <div class="Horizontal"></div>
              <div class="textTittle">
                大模型提供拼写和语法检查、风格调整、自动摘要、文本生成和翻译支持。通过语义分析和校对建议，AI帮助编辑优化内容、丰富表达，并确保文章符合读者预期。
              </div>
            </div>
          </div>
        </div>
        <div class="advantage-item">
          <img
            class="img-advantage"
            src="@/assets/image/mobile/advantage1.png"
            alt=""
          />
          <div
            class="flex flex-direction justify-content"
            style="height: 100%; flex: 1"
          >
            <div class="desc-item">
              <div class="desc-item-title">
                <img
                  class="img-number"
                  src="@/assets/image/mobile/03@2x.png"
                  alt=""
                />
                <p>&nbsp;·&nbsp;媒体矩阵</p>
              </div>
              <div class="Horizontal"></div>
              <div class="textTittle">
                涵盖：新闻源媒体发布、软文营销推广、新闻稿文章撰写、微信营销、微博推广、海外媒体推广、问答推广、达人探店打卡、红书素人种草、KOL大V发帖等多种互联网广告。
              </div>
            </div>
          </div>
        </div>
        <div class="advantage-item">
          <img
            class="img-advantage"
            src="@/assets/image/pageHome/img-homepage-pictureRes-advantage04.webp"
            alt=""
          />
          <div
            class="flex flex-direction justify-content"
            style="height: 100%; flex: 1"
          >
            <div class="desc-item">
              <div class="desc-item-title">
                <img
                  class="img-number"
                  src="@/assets/image/mobile/04@2x.png"
                  alt=""
                />
                <p>&nbsp;·&nbsp;专家团队</p>
              </div>
              <div class="Horizontal"></div>
              <div class="textTittle">
                100+专家团队,涵盖文字编辑&SEO专家&营销专家&网站运营团队等。全方位满足您的任何需求,为您解决难题。
              </div>
            </div>
          </div>
        </div>
      </div>
      <endButton></endButton>
    </div>
    <div class="loading-box" v-show="loadingPage">...加载中</div>
  </div>
</template>

<script setup>
import { ArrowDown, ArrowRightBold } from "@element-plus/icons-vue";
import EventBus from "@/utils/eventBus.js";
import { ref, reactive, onMounted, onUnmounted, onBeforeUnmount } from "vue";
import debounce from "lodash.debounce";
import animationData from "@/assets/lottie/homePage/button-diyNow_240_80";
import { reservation } from "@/utils/api/customerService/index";
import lottie from "lottie-web";
import endButton from "@/components/mobileComponent/endButton.vue";
import icon1 from "@/assets/image/pageHome/icon1.png";
import icon2 from "@/assets/image/pageHome/icon2.png";
import icon3 from "@/assets/image/pageHome/icon3.png";
import icon4 from "@/assets/image/pageHome/icon4.png";
import icon5 from "@/assets/image/pageHome/icon5.png";

import number1 from "@/assets/image/pageHome/img.png";
import number11 from "@/assets/image/pageHome/img1.png";
import number2 from "@/assets/image/pageHome/tel.png";
import number21 from "@/assets/image/pageHome/tel1.png";
import number3 from "@/assets/image/pageHome/file.png";
import number31 from "@/assets/image/pageHome/file1.png";
import number4 from "@/assets/image/pageHome/mes.png";
import number41 from "@/assets/image/pageHome/mes1.png";
import number5 from "@/assets/image/pageHome/footer11.png";
import number51 from "@/assets/image/pageHome/footer111.png";
import number6 from "@/assets/image/pageHome/ex.png";
import number61 from "@/assets/image/pageHome/ex1.png";

// 分段加载页面
const currentpage = ref(1);
const loadingPage = ref(false);
const pageShowNode = reactive({
  // banner: 0,
  // server: 1,
  // dataArr: 2,
  // customizedServices: 3,
  // process: 4,
  advantage: 1,
});
const handleScrollToBottom = () => {
  if (currentpage.value < 2) {
    loadingPage.value = true;
    setTimeout(() => {
      currentpage.value++;
      loadingPage.value = false;
    }, 1000);
  }
};
// 判断是否存在滚动条，
const initScroll = () => {
  const appDiv = document.getElementById("app");
  if (appDiv.scrollHeight > appDiv.clientHeight) {
    return;
  } else {
    currentpage.value++;
    nextTick(() => {
      initScroll();
    });
  }
};
onMounted(() => {
  initScroll();
  EventBus.on("scrollToBottom", handleScrollToBottom);
});
onBeforeUnmount(() => {
  EventBus.off("scrollToBottom");
});

const handleOpenChat = () => {
  EventBus.emit("openCustomerChat", {
    message: "您好，我想了解更多信息",
  });
};
const router = useRouter();
const serveList = ref([
  {
    title: "文案撰写",
    desc: ["代撰写文章", "专业定制", "各类专业领域&不同风格"],
    number1,
    number11,
    router: "/writingtext",
  },
  {
    title: "SEO定制",
    desc: ["低成本", "快速提高权重", "快速提高关键词排名"],
    number1: number2,
    number11: number21,
    router: "/seoCustomer",
  },
  {
    title: "软文推广",
    desc: ["海量媒体渠道", "全网推广", "帮助您的文章火爆全网"],
    number1: number3,
    number11: number31,
    router: "/softArticlePromotion",
  },
  {
    title: "网站优化",
    desc: ["关键词排名", "网站权重", "流量低成本高效提升"],
    number1: number4,
    number11: number41,
    router: "/websiteOptimization",
  },
  {
    title: "网站联运",
    desc: ["专家团队运营", "快速成型网站", "老站短期焕发新生"],
    number1: number5,
    number11: number51,
    router: "/websiteIntermodalTransportation",
  },
  {
    title: "定制需求",
    desc: ["以上方案都不满意？", "↓", "点此直接定制您的专属需求"],
    number1: number6,
    number11: number61,
  },
]);
const handleClickTo2 = (item) => {
  if (item.title === "定制需求") {
    EventBus.emit("clicktoCustomizedServices");
  } else {
    router.push(item.router);
  }
};
const servetype = ref(false);

const dataArr = ref([
  {
    title: "累计发文",
    count: "50W+",
    iconName: "icon-file",
    icon: icon1,
  },
  {
    title: "关键词定制",
    count: "10W+",
    iconName: "icon-a-2",
    icon: icon2,
  },
  {
    title: "服务网站",
    count: "1000+",
    iconName: "icon-wangzhanguanli",
    icon: icon3,
  },
  {
    title: "合作媒体",
    count: "8000+",
    iconName: "icon-men",
    icon: icon4,
  },
  {
    title: "服务企业",
    count: "800+",
    iconName: "icon-qiye",
    icon: icon5,
  },
]);

const serveForm = reactive({
  phoneNumber: "",
  describe: "",
});
const isFocus = ref(false);
const customerRef = ref();
const errorText = ref("");
const validatePhone = () => {
  // 手机号验证
  if (!serveForm.phoneNumber) {
    errorText.value = "手机号不能为空!";
    return false;
  } else {
    const reg = /^1\d{10}$/;
    if (reg.test(serveForm.phoneNumber)) {
      errorText.value = "";
      // 请求接口
      return true;
    } else {
      errorText.value = "请输入正确的手机号码.";
      return false;
    }
  }
};
const handleSubmit = debounce(() => {
  if (validatePhone()) {
    reservation({
      mobile: serveForm.phoneNumber,
      substance: serveForm.describe,
    }).then((res) => {
      const resData = JSON.parse(res.data.value);
      if (resData.code == 200) {
        EventBus.emit("openToastBox", ["定制成功！"]);
        serveForm.phoneNumber = "";
        serveForm.describe = "";
      } else {
        EventBus.emit("openToastBox", [resData.message ||"请重新定制！"]);
      }
    });
  }
}, 500);
const lottieContainer = ref(null);
const image = ref(null);
const clickableBox = ref(null);
let animationInstance = null;
let isInner = false;
const startAnimation = () => {
  image.value.style.opacity = "0";
  lottieContainer.value.style.opacity = "1";
  if (!animationInstance) {
    animationInstance = lottie.loadAnimation({
      container: lottieContainer.value,
      renderer: "svg",
      loop: false,
      autoplay: true,
      animationData: animationData,
    });
  }
  isInner = true;
  // animationInstance.addEventListener('complete', callback); // 监听动画播放完成事件
  animationInstance.playSegments([0, 45], true);
};

const handleMouseEnter = () => {
  startAnimation();
};

const handleMouseLeave = () => {
  isInner = false;

  animationInstance.addEventListener("complete", callback); // 监听动画播放完成事件
  animationInstance.playSegments([45, 85], true);
  // stopAnimation();
};
const callback = (e) => {
  if (!image.value) return;
  animationInstance.removeEventListener("complete", callback); // 监听动画播放完成事件
  if (!isInner) {
    image.value.style.opacity = "1";
    lottieContainer.value.style.opacity = "0";
  }
};
const popperVisible = ref(false);
const handleClickTo = () => {
  currentpage.value = 4;
  nextTick(() => {
    const element = document.getElementById("app");
    element.scrollTo({
      top: customerRef.value.offsetTop - 60,
      behavior: "smooth",
    });
  });
};
</script>

<style lang="scss" scoped>
.homepage {
  width: 100%;
  .aiseo-home-banner {
    height: 812px;
    width: 100%;
    background: url("@/assets/image/logo/20240619172641.webp");
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    background-size: cover;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      z-index: 1;
    }
    .img-box {
      width: 15rem; // 240px / 16
      height: 15rem; // 240px / 16
      position: relative;
      z-index: 2;
      .img-normal {
        width: 13.75rem; // 220px / 16
        height: 13.75rem; // 220px / 16
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
        transition: all 0.5s;
      }
      .img-hover {
        width: 13.75rem; // 220px / 16
        height: 13.75rem; // 220px / 16
        opacity: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.5s;
      }
      &:hover {
        .img-normal {
          width: 15rem; // 240px / 16
          height: 15rem; // 240px / 16
          opacity: 0;
          transition: all 0.5s;
        }
        .img-hover {
          width: 15rem; // 240px / 16
          height: 15rem; // 240px / 16
          opacity: 1;
          transition: all 0.5s;
        }
        .image-text {
          opacity: 1;
          z-index: 3;
          transition: all 0.5s;
        }
      }
    }
    img {
      width: 18.75rem; // 300px / 16
      height: 18.75rem; // 300px / 16
      opacity: 0.9;
      z-index: 2;
      cursor: pointer;
    }
    .el-icon {
      color: #fff;
      font-size: 1.5rem; // 24px / 16
      margin-top: 2.5rem; // 40px / 16
      margin-bottom: 1.5rem; // 24px / 16
      z-index: 2;
    }
    .banner-list {
      z-index: 2;
      li {
        font-size: 1rem; // 16px / 16
        color: #fafafa;
        text-align: center;
        & + li {
          margin-top: 1rem; // 16px / 16
        }
      }
    }
    .button-outer {
      z-index: 3;
      width: 13.625rem; // 218px / 16
      height: 3.5625rem; // 57px / 16
      border-radius: 1.875rem; // 30px / 16
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.5s;
      box-sizing: border-box;
      .learn-more {
        width: 10.625rem; // 170px / 16
        height: 3.0625rem; // 49px / 16
        border-radius: 1.8125rem; // 29px / 16
        border: 1px solid #ffffff;
        background: none;
        font-weight: 300;
        font-size: 1.125rem; // 18px / 16
        color: #ffffff;
        transition: all 0.5s;
        box-sizing: border-box;
        letter-spacing: 0.1875rem; // 3px / 16
      }
      &:hover {
        border: 2px solid #e62e3d;
        padding: 0.125rem; // 2px / 16
        transition: all 0.5s;
        .learn-more {
          background: #e62e3d;
          border: none;
          width: 13rem; // 208px / 16
          transition: all 0.5s;
        }
      }
    }
  }

  .aiseo-home-dataArr {
    width: 100%;
    background: #f5f5f5;
    padding: 16px;
    box-sizing: border-box;
    .dataArr-content {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 0 auto;
      li {
        width: 110px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .item-number {
          text-align: center;
          font-weight: bold;
          font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
          font-weight: bold;
          font-size: 32px;
          color: #1a1a1a;
          position: relative;

          &::after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 36px;
            bottom: 0;
            background: url(@/assets/image/pageHome/homepage-data_card-cover@2x.png);
            background-size: contain;
          }
        }
        .item-data-info {
          width: 100%;
          background: #f5f5f5;
          display: flex;
          justify-content: center;
          line-height: 20px;
          position: relative;
          .data-icon {
            width: 20px;
          }
          .data-info-title {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: bold;
            font-size: 12px;
            color: #1a1a1a;
          }
        }
      }
    }
  }
  .aiseo-home-customizedServices {
    width: 100%;
    height: 630px;
    overflow: hidden;
    .aiseo-home-right {
      width: 100%;
      padding: 16px 24px 43px 24px;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      .img-customizedServices {
        width: 120px;
        height: 50px;
        object-fit: cover;
        object-position: right;
      }
      .form-title {
        color: #ffffff;
        align-items: baseline;
        font-weight: bold;
        margin-left: 24px;
        .customized-title {
          font-family: HelloFont WenYiHei;
          font-weight: 400;
          font-size: 48px;
          color: #e6e6e6;
        }
        .serve-title {
          font-family: HelloFont WenYiHei;
          font-weight: 400;
          font-size: 32px;
          color: #e6e6e6;
        }
        .Horizontal {
          width: 8px;
          height: 2px;
          background: #e62e3d;
        }
      }
      .title-en {
        margin-left: 64px;
        font-family: Poiret One;
        font-weight: 400;
        font-size: 24px;
        color: #e6e6e6;
      }
      .title-disc {
        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
        font-weight: bold;
        font-size: 16px;
        color: #e6e6e6;
        line-height: 24px;
        text-align: center;
      }
      .title {
        font-size: 32px;
        text-align: center;
      }

      .customizedServices-content {
        display: flex;

        .customizedServices-form {
          .el-button {
            margin-left: 120px;
          }
        }
      }
      .form-item {
        width: 100%;
        // display: flex;
        // img {
        //   width: 40px;
        //   height: 40px;
        // }
        .form-item-content {
          width: 100%;
          //   margin-left: 24px;
          //   flex: 1;
          .form-item-title {
            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
            font-weight: bold;
            font-size: 14px;
            color: #e6e6e6;
          }
          .form-item-phonebox {
            // padding-bottom: 5px;
            border-bottom: 1px solid #808080;
            width: 100%;
            font-family: Alibaba PuHuiTi-Regular;
            font-weight: 400;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            &:hover {
              border-bottom: 1px solid #e62e3d;
            }
            .phineInput {
              border: none;
              background: none;
              color: #ffffff;
              font-family: Alibaba PuHuiTi-Regular;
              flex: 1;
              :deep(.el-input__wrapper) {
                background: none !important;
                box-shadow: none;
                font-family: Alibaba PuHuiTi-Regular;
                padding: 0;
                .el-input__inner {
                  color: #ffffff;
                  &::-webkit-input-placeholder {
                    /* WebKit browsers，webkit内核浏览器 */
                    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
                    font-weight: 400;
                    font-size: 12px;
                    color: #808080;
                  }
                  &:hover {
                    &::-webkit-input-placeholder {
                      /* WebKit browsers，webkit内核浏览器 */
                      color: #e6e6e6;
                    }
                  }
                }
              }
            }
            .error-tips {
              opacity: 0;
            }
          }
          .foucus-input {
            border-bottom: 1px solid #e62e3d;
          }
          .form-item-phonebox-erro {
            border-bottom: 1px solid #e62e3d;
            color: #e62e3d;
            .error-tips {
              opacity: 1;
            }
            :deep(.el-input__inner) {
              color: #e62e3d !important;
            }
          }
          .form-item-textarea {
            height: 224px;
            background: #393939;
            border-radius: 2px 24px 24px 24px;
            padding: 12px;
            box-sizing: border-box;
            :deep(.el-textarea__inner) {
              background: none;
              height: 100%;
              box-shadow: none;
              padding: 0;
              color: #e6e6e6;
              font-weight: 400;
              font-size: 12px;
              &::-webkit-input-placeholder {
                /* WebKit browsers，webkit内核浏览器 */
                color: #808080;
              }
            }
          }
        }
      }
      .phone-item {
        margin-top: 34px;
      }
    }
  }
}
.homefoot {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .Horizontal {
    width: 8px;
    height: 2px;
    background: #e62e3d;
    margin: 12px 0 16px 0;
  }
}

.bodyRinges {
  width: 100%;
  .advantage-item {
    .img-advantage {
      width: 100%;
      object-fit: cover;
    }
  }
  .desc-item {
    padding: 28px;
    box-sizing: border-box;
    .desc-item-title {
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      font-weight: bold;
      font-size: 16px;
      color: #1a1a1a;
      display: flex;
      align-items: center;
      .img-number {
        width: 23px;
        height: 16px;
      }
    }
    .Horizontal {
      background: #1a1a1a;
    }
    .textTittle {
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      font-weight: 400;
      font-size: 14px;
      color: #808080;
      line-height: 20px;
      text-align: left;
    }
  }
  .item-bg {
    width: 1760px;
    height: 600px;
    background: #e6e6e6;
    position: absolute;
    left: -360px;
    top: 85px;
    z-index: 0;
  }
}
.Horizontal {
  width: 8px;
  height: 2px;
  background: #1a1a1a;
  margin: 12px 0 16px 0;
}
.aiseo-home-advantage {
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 16px;
  box-sizing: border-box;
  overflow: overlay;
}
.bosdwer {
  width: 40px;
}

.bosdwerJian {
  width: 21px;
  margin: 0 24px;
}

.aiseo-home-server {
  width: 100%;
  position: relative;
  background: #f5f5f5;
  z-index: 2;
  overflow: overlay;
  .server-content {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-rows: repeat(1, 174px);
    grid-template-columns: repeat(6, 323px);
    padding: 80px 16px 30px 16px;
    box-sizing: border-box;
    // gap: 24px;
    .content-item {
      background: #ffffff;
      border-radius: 12px;
      padding: 40px 32px;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      & + .content-item {
        margin-left: 16px;
      }
      img {
        width: 88px;
        height: 88px;
      }
      .item-number1 {
        display: block;
      }
      .item-number11 {
        display: none;
      }
      &:hover {
        .item-number11 {
          display: block;
        }
        .item-number1 {
          display: none;
        }
      }
      .item-title {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        font-size: 20px;
        color: #1a1a1a;
        display: flex;
        align-items: center;
        .el-icon {
          font-size: 16px;
          opacity: 0;
        }
      }
      .item-description {
        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        li + li {
          margin-top: 4px;
        }
      }
      .item-number {
        position: absolute;
        right: 40px;
        top: 30%;
        width: 84px;
      }
    }
    .content-item:hover {
      background: #e62e3d;
      box-shadow: 0px 4px 7px 0px rgba(230, 46, 61, 0.24);
      .item-title {
        color: #ffffff;
        .el-icon {
          opacity: 1;
        }
      }
      .item-description {
        color: #ffffff;
      }
    }
  }
}
.loading-box {
  text-align: center;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 10px;
  color: #808080;
  line-height: 24px;
  letter-spacing: 1px;
}
</style>
